<template>
  <el-container :style="{height: '100%',background: '#ebebeb'}">
    <el-main :style="{paddingTop:'150px'}">
      <el-card class="login-card">
        <div slot="header" :style="{fontSize:'16px',color:'#409EFF'}">
          <i class="el-icon-location"></i>
          <span>旅游管理系统</span>
        </div>
        <el-form :model="formData" :rules="rules" ref="Form">
          <el-form-item label="用户名" prop="username">
            <el-input type="username" v-model="formData.username" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="formData.password" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item :style="{paddingTop:'20px'}">
            <el-button :style="{width:'100%'}" type="primary" @click="submitForm('ruleForm2')" size="medium">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>


  export default {
    name: "backstageLogin",
    data() {
      return {
        formData: {
          username: "",
          password: "",
        },
        rules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
          ]
        }
      };
    },
    methods: {
      submitForm() {
        this.$router.push({
          path: "/backstage-manager/user-manager"
        });
      },
    }
  };
</script>

<style lang="less">
  .login-card {
    width: 400px;
    margin: auto;
  }
</style>
